<template>
    <el-button-group>
      <el-button size="mini" style="border-radius: 5px;margin: 5px 0 5px 0" icon="el-icon-bottom">
        <a download="歌曲信息导入模板.xlsx" :href="fileUrl" style="color: inherit;text-decoration: none">模板下载</a>
      </el-button>
      <el-button size="mini" style="border-radius: 5px;margin: 5px 0 5px 0" icon="el-icon-bottom" @click="exportExcel()">
        导出
      </el-button>
      <el-button size="mini" @click="handleClick" style="border-radius: 5px;margin: 5px 0 5px 0" icon="el-icon-bottom">
        导入
      </el-button>
      <input type="file" style="display: none" ref="fileInput" @change="handleChange" />
    </el-button-group>
</template>

<script>
import fileUrl from '../assets/excel/歌曲信息导入模板.xlsx'
export default {
  data(){
    return {
      fileLoading: false,
      fileUrl,
    }
  },
  methods:{
    handleClick() {
      this.$refs.fileInput.click();
    },
    handleChange(event) {
      const file = event.target.files[0];
      if (!file) {
        console.log('请选择文件');
        return;
      }
      // 处理文件上传的逻辑
      this.uploadFile(file);
    },
    uploadFile(file) {
      // 这里使用 FormData 和 axios 上传
      const formData = new FormData();
      formData.append('file', file);
      this.$axios.post('/song/importPlan', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('文件上传成', response);
      }).catch(error => {
        console.error('文件上传失败', error);
      });
    },
    exportExcel(){
      const config = {
        headers: {'Accept': 'application/vnd.ms-excel'},
        responseType: 'blob'
      };
      this.$axios.get("/song/exportPlan", config).then((res) => {
        if (res.status === 200) {
          this.downloadExcel(res.data)

        }
      })
    },
  }
}
</script>

<style scoped>

</style>
